<template>
  <div class="common-layout">
    <el-container>
      <!--   公共 header start   -->
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          :unique-opened="true"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(item, index) in moni"
            :key="item.title"
            :label="item.title"
            :name="item.title"
            :index="item.name"
            @click="titleClick"
            >{{ item.title }}</el-menu-item
          >
          <div class="flex-grow" />
          <div style="display: flex; align-items: center">
            <el-popover
              :width="300"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              trigger="click"
            >
              <template #reference>
                <el-avatar
                  src="https://avatars.githubusercontent.com/u/72015883?v=4"
                />
              </template>
              <template #default>
                <div
                  class="demo-rich-conent"
                  style="
                    display: flex;
                    gap: 16px;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <el-avatar
                    :size="60"
                    src="https://avatars.githubusercontent.com/u/72015883?v=4"
                    style="margin-bottom: 8px"
                  />
                  <div>
                    <p
                      class="demo-rich-content__name"
                      style="margin: 0; font-weight: 500; text-align: center"
                    >
                      所属部门
                    </p>
                    <p
                      class="demo-rich-content__mention"
                      style="
                        margin: 0;
                        font-size: 14px;
                        color: var(--el-color-info);
                        text-align: center;
                      "
                    >
                      所属角色
                    </p>
                  </div>

                  <el-row class="mb-4">
                    <el-button>用户面板</el-button>
                    <el-button type="danger">退出登录</el-button>
                  </el-row>
                </div>
              </template>
            </el-popover>
          </div>
        </el-menu>
      </el-header>
      <!--   公共 header end   -->
      <!--   公共主体 start   -->
      <el-main style="padding-left: 0; padding-right: 0">
        <el-container class="layout-container">
          <!--   公共主体导航 start       -->
          <el-menu
            :default-active="activeSecondIndex"
            class="el-menu-vertical-demo"
            :collapse="isCollapseTwo"
            :collapse-transition="false"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              v-for="(menu, index) in activeTab.children"
              :key="menu.title"
              :index="menu.name"
              @click.native="clickMenu(menu, index)"
            >
              <template #title>
                <!-- <el-icon><location /></el-icon> -->
                <span>{{ menu.title }}</span>
              </template>
            </el-menu-item>
            <el-icon
              v-if="!isCollapseTwo"
              @click="isCollapseTwo = true"
              class="menu-control"
              ><DArrowLeft></DArrowLeft
            ></el-icon>
            <el-icon
              v-if="isCollapseTwo"
              @click="isCollapseTwo = false"
              class="menu-control"
              ><DArrowRight></DArrowRight
            ></el-icon>
          </el-menu>

          <!--   公共主体导航 end       -->
          <!--     内容替换部分 start     -->
          <el-container>
            <el-main style="padding: 15px !important">
              <router-view></router-view>
            </el-main>
          </el-container>
          <!--     内容替换部分 end     -->
        </el-container>
      </el-main>
      <!--   公共主体 end   -->
      <el-footer style="text-align: center; line-height: 60px">
        @copyright 蓝狐（西安）科技信息有限公司
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import {initRouter} from '../../router/index'
import {
  Document,
  Menu as IconMenu,
  Message,
  Setting,
} from "@element-plus/icons-vue";
const router = useRouter();
const moni = ref([
  {
    title: "用户管理",
    name: "/users",
    children: [
      {
        title: "用户管理",
        name: "users",
        path: "../views/homepage/users/users.vue",
      },
      {
        title: "部门管理",
        name: "bumen",
        path: "../views/homepage/users/bumenManagement.vue",
      },
      {
        title: "角色管理",
        name: "role",
        path: "../views/homepage/users/roleManagement.vue",
      },
      {
        title: "菜单管理",
        name: "menu",
        path: "../views/homepage/users/menuManagement.vue",
      },
    ],
  },
  {
    title: "网站配置",
    name: "/webStation",
    children: [
      {
        title: "选项配置",
        name: "selectPeizhi",
        path: "../views/homepage/customer/customer.vue",
      },
    ],
  },
  {
    title: "客户管理",
    path: "",
    name: "/customer",
    children: [
      {
        title: "客户管理",
        name: "/customer",
        path: "../views/homepage/customer/list.vue",
      },
      {
        title: "新增客户",
        name: "/customer_edit",
        path: "../views/homepage/customer/edit.vue",
      },
      {
        title: "选项配置",
        name: "/edit",
        path: "../views/homepage/customer/edit.vue",
      },
    ],
  },
]);
console.log("router.currentRoute.value.path,", router.currentRoute.value.path);
const index = moni.value.findIndex((item) => {
  return item.name === router.currentRoute.value.path || moni.value[0];
});
const activeName = ref(moni.value[index].title);
const activeTab = ref(moni.value[index]);
const activeSecondIndex = ref("1");
//导航
const activeIndex = ref(index + 1 + "");
console.log("activeIndex", activeIndex);
const handleSelect = (key: string, keyPath: string[], item: any) => {
  console.log(key, keyPath, item);
  const selectIndex = moni.value.findIndex((item) => {
    return item.name === key;
  });
  activeTab.value = moni.value[selectIndex * 1];
  if (
    router.currentRoute.value.path !== key &&
    !moni.value[selectIndex].children
  ) {
    router.push(key);
    activeSecondIndex.value = "0";
  }
};

//控制菜单显示隐藏
const isCollapseTwo = ref(false);
const isCollapse = ref(false);
const handleCollapseOpen = () => {
  isCollapse.value = false;
};
const handleCollapseClose = () => {
  isCollapse.value = true;
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const clickMenu = (menu: { name: string }, index: number) => {
  console.log(menu, index);
  activeSecondIndex.value = index + 1 + "";
  if (router.currentRoute.value.path !== menu.name) {
    router.push(menu.name);
  }
};
// 表头菜单的点击事件
const titleClick = (e) => {
  router.push(e.indexPath[0]);
};
</script>

<style lang="less" scoped>
/***菜单控制按钮 start**/
.menu-control {
  position: absolute;
  top: 0px;
  right: -17px;
  background-color: #ffffff;
  padding: 5px 0px 5px 0px;
  border: solid 1px var(--el-menu-border-color);
  border-left: 0;
  border-top: 0;
}
/***菜单控制按钮 end****/
/*header样式  start */
.el-header {
  background-color: #fff;
  border-bottom: solid 1px var(--el-menu-border-color);
}
.el-header > .el-menu {
  border-bottom: none;
}
.flex-grow {
  flex-grow: 1;
}
/*header样式  end */

/*主体内容样式 start*/
.common-layout > .el-container {
  height: 100vh;
}

.layout-container {
  height: 100%;
}
.box-card {
  margin-bottom: 15px;
}
.el-scrollbar,
.scrollbar__wrap {
  height: auto !important;
}
/*主体内容样式 end*/

/*侧边导航  start*/

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
/*侧边导航  end*/
/*内容容器 start*/
.el-main {
  padding: 0;
}
/*内容容器end*/
/*脚部样式start*/
.el-footer {
  background-color: #ffffff;
  border-top: solid 1px var(--el-menu-border-color);
}
/*脚部样式end*/
</style>
